<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   请输入城市: <input type="text" id="city">
<div id="hchart" style="width: 450px;height: 380px;"></div>
</body>
</html>
<script src="jquery-3.3.1.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script>
    $("#city").blur(function () {
        var city=$(this).val();
        $.ajax({
            url:"qi.php",
            data:{city:city},
            dataType:"json",
            type:"post",
            success:function (res) {
                console.log(res);
                var week="";
                var temp="[";
                $.each(res,function (i,v) {
                    week +=v.week+",";
                    temp +="["+v.temp_low+","+v.temp_high+"],";//[[14,19],[15,20]]
                });
                week=week.split(",");
                temp+="]";
                var chart = Highcharts.chart('hchart', {
                    chart: {
                        type: 'columnrange', // columnrange 依赖 highcharts-more.js
                        inverted: true
                    },
                    title: {
                        text: '一周温度变化范围'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories:week
                    },
                    yAxis: {
                        title: {
                            text: '温度 ( °C )'
                        }
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    series: [{
                        name: '温度',
                        data: eval(temp)
                    }]
                });
            }
        })
    })
</script>